<template>
  <view class="drama-page">
    <!-- 头部区域 -->
    <header class="header">
      <image class="header-image" src="/static/header-bg.png" mode="aspectFill"></image>
      <view class="back-button" @click="goBack">
        <image class="back-icon" src="/static/back-icon.png" mode="aspectFit"></image>
      </view>
      <view class="header-content">
        
        <!-- 标题和搜索 -->
        <view class="title-section">
          <view class="left-section">
            <view class="back-button-inline" @click="goBack">
              <image class="back-icon-inline" src="/static/back-icon.png" mode="aspectFit"></image>
            </view>
            <image class="page-title-image" src="/static/drama-logo.png" mode="aspectFit"></image>
          </view>
          <view class="search-bar">
            <input 
              class="search-input" 
              v-model="searchKeyword" 
              placeholder="搜短剧"
              @confirm="performSearch"
            />
            <image class="search-icon" src="/static/search-icon.png" mode="aspectFit" @click="performSearch"></image>
          </view>
        </view>
      </view>
    </header>

    <!-- 短剧内容区域 -->
    <view class="drama-content">
      <!-- 短剧海报网格 -->
      <view class="drama-grid" v-if="dramaList.length > 0">
        <view 
          class="drama-item" 
          v-for="(drama, index) in dramaList" 
          :key="index"
          @click="playDrama(drama)"
        >
          <view class="drama-poster">
            <image 
              class="poster-image" 
              :src="drama.poster" 
              mode="aspectFill"
            ></image>
          </view>
          <text class="drama-name">{{ drama.name }}</text>
        </view>
      </view>
      <!-- 空状态 -->
      <view class="empty-state" v-else-if="!loading">
        <text class="empty-text">{{ searchKeyword ? '未找到相关短剧' : '暂无短剧' }}</text>
      </view>
    </view>

  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import ShortDramaUtil from '@/sheep/api/shortdrama/shortdrama'

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 短剧数据
const dramaList = ref([])
const loading = ref(false)

// 获取短剧列表数据
const getDramaList = async () => {
  try {
    loading.value = true
    const response = await ShortDramaUtil.getShortDramaList()
    
    if (response.code === 0) {
      dramaList.value = response.data.map(item => ({
        id: item.id,
        title: item.dramaName,
        name: item.dramaName,
        poster: item.coverImage,
        totalEpisodes: item.totalEpisodes,
        chargeStartEpisode: item.chargeStartEpisode,
        unlockPrice: item.unlockPrice,
        introduction: item.introduction,
        status: item.status
      }))
    } else {
      uni.showToast({
        title: response.msg || '获取短剧列表失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('获取短剧列表失败:', error)
    uni.showToast({
      title: '网络错误，请重试',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 搜索相关数据
const searchKeyword = ref('')

// 执行搜索
const performSearch = async () => {
  // 如果搜索关键词为空，加载全部列表
  if (!searchKeyword.value || searchKeyword.value.trim() === '') {
    getDramaList()
    return
  }
  
  try {
    loading.value = true
    const response = await ShortDramaUtil.getShortDramaList(searchKeyword.value.trim())
    
    if (response.code === 0) {
      dramaList.value = response.data.map(item => ({
        id: item.id,
        title: item.dramaName,
        name: item.dramaName,
        poster: item.coverImage,
        totalEpisodes: item.totalEpisodes,
        chargeStartEpisode: item.chargeStartEpisode,
        unlockPrice: item.unlockPrice,
        introduction: item.introduction,
        status: item.status
      }))
    } else {
      uni.showToast({
        title: response.msg || '搜索失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('搜索失败:', error)
    uni.showToast({
      title: '网络错误，请重试',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}


// 播放短剧
const playDrama = (drama) => {
  uni.navigateTo({
    url: `/pages/drama/player?dramaId=${drama.id}&episodeId=1`
  })
}

onMounted(() => {
  getDramaList()
})
</script>

<style lang="scss" scoped>
.drama-page {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  min-height: 100vh;
}

/* 头部区域 */
.header {
  position: relative;
  padding: 32rpx 0 48rpx;
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 50%, #f0e6ff 100%);
  overflow: hidden;
  height: 280rpx;
}

/* 添加装饰性背景元素 */
.header::before {
  content: '';
  position: absolute;
  top: -50rpx;
  right: -50rpx;
  width: 200rpx;
  height: 200rpx;
  background: radial-gradient(circle, rgba(255, 107, 157, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 1;
}

.header::after {
  content: '';
  position: absolute;
  bottom: -30rpx;
  left: -30rpx;
  width: 150rpx;
  height: 150rpx;
  background: radial-gradient(circle, rgba(74, 144, 226, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 1;
}

.header-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.back-button {
  display: none; /* 隐藏原来的绝对定位按钮 */
}

.back-icon {
  display: none;
}

.back-button-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -10rpx;
  padding: 10rpx;
}

.back-icon-inline {
  width: 60rpx;
  height: 60rpx;
}

.header-content {
  position: relative;
  z-index: 2;
  padding: 20rpx 17rpx;
}

/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .time {
    font-size: 32rpx;
    font-weight: 600;
    color: #000;
  }
  
  .status-icons {
    display: flex;
    align-items: center;
    gap: 8rpx;
    
    .signal-icon, .wifi-icon, .battery-icon {
      font-size: 24rpx;
    }
  }
}

/* 标题和搜索区域 */
.title-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;
}

.left-section {
  display: flex;
  align-items: center;
  flex: 1;
}

.page-title-image {
  width: 146rpx;
  height: 55rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 40rpx;
  padding: 18rpx 20rpx;
  min-width: 400rpx;
  
  .search-input {
    flex: 1;
    font-size: 24rpx;
    color: #333;
    background: transparent;
    border: none;
    outline: none;
    
    &::placeholder {
      color: #999;
    }
  }
  
  .search-icon {
    width: 32rpx;
    height: 32rpx;
    margin-left: 16rpx;
    cursor: pointer;
    
    &:active {
      opacity: 0.7;
    }
  }
}

/* 短剧内容区域 */
.drama-content {
  margin: -200rpx 20rpx 0;
  position: relative;
  z-index: 1;
}

.drama-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  padding: 20rpx 0;
}

.drama-item {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  transition: transform 0.2s ease;
  
  &:active {
    transform: scale(0.98);
  }
}

.drama-poster {
  position: relative;
  width: 340rpx; 
  height: 453rpx;
  border-radius: 12rpx;
  overflow: hidden;
  background: linear-gradient(135deg, #ff6b9d, #ff9ec7);
}

.poster-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drama-name {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
  text-align: left;
  line-height: 1.4;
}


.empty-state {
  padding: 100rpx 30rpx;
  text-align: center;
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .drama-grid {
    gap: 15rpx;
  }
  
  .drama-poster {
    height: 240rpx;
  }
  
  .drama-title {
    font-size: 24rpx;
  }
  
  .drama-subtitle {
    font-size: 18rpx;
  }
}
</style>
